<template>

  <div class="page-gr-detail">
    <div class="table w50">
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">货单编号</li>
          <li class="table-cell-content br0">{{formData.grNo}}</li>
          <li class="table-cell-title br0">生成时间</li>
          <li class="table-cell-content">{{formData.createdTimeDisplay}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">更新时间</li>
          <li class="table-cell-content br0">{{formData.lastEditTimeDisplay}}</li>
          <li class="table-cell-title br0">货物名称</li>
          <li class="table-cell-content">{{formData.goodsNameCn}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">品种</li>
          <li class="table-cell-content br0">{{formData.category}}</li>
          <li class="table-cell-title br0">等级</li>
          <li class="table-cell-content">{{formData.grade}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">货主</li>
          <li class="table-cell-content br0">{{formData.companyName}}</li>
          <li class="table-cell-title br0">原产地</li>
          <li class="table-cell-content">{{formData.countryOrigin}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">存放地</li>
          <li class="table-cell-content br0">{{formData.storageCity}}</li>
          <li class="table-cell-title br0">厂号</li>
          <li class="table-cell-content">{{formData.vendorNo}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">重量（吨）</li>
          <li class="table-cell-content br0">{{formData.weight}}</li>
          <li class="table-cell-title br0">生产日期</li>
          <li class="table-cell-content">{{formData.productDateDisplay}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">联系人</li>
          <li class="table-cell-content br0">{{formData.contactName}}</li>
          <li class="table-cell-title br0">联系电话</li>
          <li class="table-cell-content">{{formData.contactMobileNo}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">有效状态</li>
          <li class="table-cell-content br0">{{formData.isDeletedDisplay}}</li>
          <li class="table-cell-title br0">分享次数</li>
          <li class="table-cell-content">{{formData.shareCount}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">转发次数</li>
          <li class="table-cell-content br0">{{formData.repeatCount}}</li>
          <li class="table-cell-title br0">收藏次数</li>
          <li class="table-cell-content">
            <p v-if="formData.favorCount == null || formData.favorCount == ''">0</p>
            <p v-if="formData.favorCount != null && formData.favorCount != ''">{{formData.favorCount}}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="table mb-1">
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title-lastrow">备注</li>
          <li class="table-cell-content-lastrow br0">{{formData.remark}}</li>
        </ul>
      </div>
    </div>

    <div class="goods-pic">
      <div class="goods-title">货物照片</div>
      <div class="table" >
        <div class="table-inner" >
          <ul>
            <li v-for="(GoodsPic, index) in handleGoodsData" >
              <div class="goods-pic-box">
                <img v-if="GoodsPic.fileType ==1" preview preview="goodsGroup" :src="GoodsPic.urlM" :large="GoodsPic.url"  alt="" :preview-text="GoodsPic.fileClassDisplay">
              </div>
              <p>{{GoodsPic.fileClassDisplay}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</template>
<script type="text/ecmascript-6">
  import PcDialog from 'components/dialog';
  export default{
    props: {
      id: [String, Number]
    },
    components: {
      PcDialog
    },
    data() {
      return {
        formData: [],
        handleGoodsData: [],
        grId: this.id
      };
    },
    created() {
      this.initData();
    },
    computed: {
      htmlTitle () {
        return this.formData.grNo;
      }
    },
    methods: {
      // 根据货单ID获取货单的详细数据
      initData() {
        this.ajax({
          url: '/hdzs/gr/getWebGrDetail/' + this.grId,
          type: 'GET',
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.formData = res.result;
            // 更新货物照片数据
            this.handleGoodsPic();
            this.$previewRefresh();
          }
        });
      },
      handleGoodsPic () {
        let len = this.formData.goodsPics.length;
        if (len === 0) {
          return;
        }
        let handleData = [];
        for (var i = 0; i < len; i++) {
          let goodsPicObj = {};
          goodsPicObj.fileType = this.formData.goodsPics[i].fileType;
          goodsPicObj.url = this.formData.goodsPics[i].url;
          goodsPicObj.urlM = this.formData.goodsPics[i].urlM;
          goodsPicObj.fileClassDisplay = this.formData.goodsPics[i].fileClassDisplay;
          handleData.push(goodsPicObj);
        };
        this.handleGoodsData = handleData;
      }
    }
  };
</script>
<style>
  .page-gr-detail {
    width: 958px;
  }
  .page-gr-detail .table{
    display:table;
    border-collapse:collapse;
    border:1px solid #e5e5e5;
    width:100%;
    background:#ffffff;
  }
  .page-gr-detail .table .table-row-group{
    display:table-row-group;
    width: 100%;
    border-top: 1px solid #e5e5e5;
    border-left:1px solid #e5e5e5;
  }
  .page-gr-detail .table .table-row-group .table-row{
    display:table-row;
    height: 40px;
  }
  .page-gr-detail .table .table-row-group .table-row .table-cell-title{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 160px;
    line-height: 40px;
    text-align:center;
    color: #4d4d4d;
  }
  .page-gr-detail .table .table-row-group .table-row .table-cell-content{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 320px;
    line-height: 40px;
    text-indent: 20px;
    color: #1a1a1a;
  }
  .page-gr-detail .table .table-row-group .table-row .table-cell-title-lastrow{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 160px;
    line-height: 40px;
    text-align:center;
    color: #4d4d4d;
  }
  .page-gr-detail .table .table-row-group .table-row .table-cell-content-lastrow{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 800px;
    line-height: 40px;
    text-indent: 20px;
    color: #1a1a1a;
  }
  .page-gr-detail .table-h2 img{
    margin-right: 6px;
    vertical-align: middle;
    margin-top: -4px;
    display: inline-block;
  }
  .page-gr-detail .el-table--border td{
    border-right:1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  .page-gr-detail .table .w50 ul{
    box-sizing: border-box;
  }
  .page-gr-detail .el-table--border td div{
    color:#000;
  }
  .br0{
    border-right:none;
  }
  .page-gr-detail .mb-1{
    margin-top:-1px;
    margin-bottom:-1px;
  }

  .page-gr-detail .goods-pic{
    margin-top:20px;
    width: 100%;
  }
  .page-gr-detail .goods-pic .goods-title{
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
    height: 40px;
    line-height: 40px;
    background:#ffffff;
    text-align:left;
    text-indent: 20px;
    font-size: 16px;
    color: #1a1a1a;
  }
  .page-gr-detail .goods-pic .table{
    display:table;
    border-collapse:collapse;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    border-top:0px solid;
    border-bottom:1px solid #e5e5e5;
    margin-bottom:15px;
    width:100%;
    background:#FFFFFF;
  }
  .page-gr-detail .goods-pic .table .table-inner{
    display:table;
    margin-top:20px;;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:5px;
    border-collapse:collapse;
    border:0px solid;
    background:#FFFFFF;
  }
  .page-gr-detail .goods-pic .table .table-inner ul li{
    width:144px;
    height:180px;
    display: inline-block;
    cursor: pointer;
    margin-right:10px;
    margin-bottom:40px;
  }
  .page-gr-detail .goods-pic .table .table-inner ul li .goods-pic-box{
    width:100%;
    height:100%;
    position: relative;
    cursor: pointer;
    border:1px solid #e6e6e6;
    margin-left:10px;
    margin-right:10px;
  }
  .page-gr-detail .goods-pic .table .table-inner ul li .goods-pic-box img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .page-gr-detail .goods-pic .table .table-inner ul li p{
    width:100%;
    font-size: 14px;
    line-height:30px;
    text-align: center;
    margin-left:10px;
    margin-right:10px;
  }

</style>
